<template>
  <div>
    <div id="loading_header">
      <div id="top">
        <div class="center">
          <div id="toplogo">
            <a href="#" target="_blank"><img :src="BASE_API + webconfig.logoimg" /></a>
          </div>
          <!-- toplogo结束 -->
          <!-- topad结束 -->
          <!-- <a href="#" id="more" target="_blank" class="btnmore"><i class="icon_list"></i> 游戏列表</a> -->
          <div class="quicklink">
            <!-- <a href="#" class="link_reg" target="_blank">帐号注册 </a> | -->
            <a :href="boxUrl" target="_blank">
              <img src="../../assets/static/images/09.png" />
            </a>
            <!-- <a href="#" class="link_recharge" target="_blank"> 充值 </a> -->
          </div>
          <span class="clear"></span>
        </div>
      </div>

      <!-- GameList结束 -->
    </div>




    <div class="center">
      <div class="livebox">
        <ul>
          <li v-for="item in  LiveList ">
            <div class="liveimg">
              <img :src="BASE_API + item.liveImg">
              <div class="livebut">
                <a :href=item.liveUrl target="_blank">进入直播间</a>
              </div>
            </div>
            <div class="livefoot">
              <h2>{{ item.liveTitle }}</h2>
              <div class="infor_text">
                <img src="../../assets/static/images/18.png" class="fl">
                <span class="fl">{{ item.gameName }}</span>
                <span class="fr">{{ item.hotNum }}万</span>
                <img src="../../assets/static/images/17.png" style="width: 12px;    margin-top: 5px;" class="fr">
              </div>
            </div>
          </li>
        </ul>
      </div>



    </div>
    <!-- Live结束 -->


    <footer id="footer">
      <div class="center">
        <div style="margin-right: 43px;">
          <img src="../../assets/static/images/footerbg.png" />
        </div>
        <div style="    line-height: 20px;" v-html="webconfig.mzsm"></div>
      </div>

    </footer>
    <!-- footer结束 -->
    <div :class="rightbar ? 'rightbar' : 'rightbar close'" id="kf">

      <a href="javascript:;" @click="doAct" class="btn-close"></a>

      <h6>玖尚互娱<span>扫扫添加关注我们游戏动态</span></h6>
      <div class="code">

        <a target="_blank">
          <img :src="BASE_API + webconfig.qrcode" width="151" height="155" border="0">
        </a>
      </div>

      <a v-for=" item, index  in  gameContactList " :href="item.skipUrl" target="_blank" class="kefu">{{ item.names
      }}</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxUrl: '',
      LiveList: '',
      gameContactList: '',
      webconfig: '',
      rightbar: true,
      BASE_API: process.env.BASE_API + '/'
    }
  },

  computed: {},
  mounted() {
    this.$apis.getConfig().then(res => {

      this.gameContactList = res.data.data.gameContactList
      this.webconfig = res.data.data.webconfig;
      this.gameContactList.map(item => {
        if (item.names == "盒子下载") {
          this.boxUrl = item.skipUrl
        }
      })

    })


    this.$apis.gameLiveList({
      page: 1,
      pageSize: 999
    }).then(res => {
      this.LiveList = res.data.data.list
    })



  },

  methods: {
    // bb(e) { 
    //   console.log(e)
    // },
    doAct() {
      this.rightbar ? this.rightbar = false : this.rightbar = true
    },
  }
}
</script>

<style lang="less" scoped>
.livebox {
  min-height: calc(100vh - 180px);
  box-sizing: border-box;

  overflow: hidden;
  margin-top: 80px;
}

.livebox ul {
  overflow: hidden;
  width: 105%;
}

.livebox ul li {
  overflow: hidden;
  float: left;
  width: 296px;

  background: #414141;
  border-radius: 5px;
  margin-right: 30px;
  margin-bottom: 30px;

}

.liveimg {
  width: 100%;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.liveimg img {
  width: 100%;
  height: 100%;
}

.liveimg:hover .livebut {
  display: block;
}

.livebut {
  width: 100%;
  height: 100%;
  background: #242424c2;
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;

}

.livebut a {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 130px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  color: #f1af4a;
  border: 2px solid #f1af4a;
  border-radius: 50px;
  margin: auto;
  cursor: pointer;
  text-decoration: none
}

.livefoot {
  padding: 10px;
  color: #d5d5d5;
  font-size: 12px;
}

.livefoot h2 {
  font-size: 14px;
}

.livefoot .infor_text {
  overflow: hidden;
}

.livefoot .infor_text span,
.livefoot .infor_text a {
  margin: 5px 10px;
}
</style>